@color: #1864aa;
.rgbaBG(@c , @a){
    @rgba : rgba(red(@c),green(@c),blue(@c),@a);
    @shim : argb(@rgba) ;
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startcolorstr=@{shim},endcolorstr=@{shim})" ;
    :root & {
        -ms-filter: none ;
        background: @rgba ;
    }
}
.bg {
    .rgbaBG(#ff825b, 0.8) ;
}
*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none
}
html{
	height: 100%;
	width: 100%;
}
body{
	color: #2b2b2b;
	font-size: 14px;
}
.gary{
	color: #afafaf;
	line-height: 27px;
}
.box{
	width: 1200px;
	margin: 0 auto;
}
.english{
	text-transform: Uppercase
}
div.header:after,ul:after,li:after{
	content: "";
	display: block;
	clear: both
}
div.header{
	text-align: center;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	*{
		color: #fdfcfc
	}
	div.logo{
		float: left;
		width: 140px;
		height: 40px;
		padding: 10px 0;
	}
	ul{
		position: absolute;
		width: 1200px;
		top: 10px;
		left: 50%;
		margin-left: -600px;
		@media(max-width:1490px){
			width: 1100px;
			margin-left: -550px;
		}
		li{
			padding: 10px 0 20px;
			float: left;
			width: 11.1%;
			text-align: center;
			&.active > a,&:hover > a{
				color: #ffdf43
			}
			&:hover div.ul{
				display: block
			}
			&:first-child{
				text-align: left;
				a{
					margin-left: 55%
				}
			}
		}
	}
	div.phone{
		float: right;
		padding-left: 35px;
		background: url(/images/phone.png) 0 center no-repeat;
		height: 24px;
		line-height: 24px;
		margin-right: 20px;
		margin-top: 18px;
	}
}
div.ul{
	text-align: left;
	padding: 0 0 25px;
	position: fixed;
	left: 0;
	top: 50px;
	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99232323,endColorstr=#99232323)";
	background: rgba(35,35,35,.65);
	z-index: 99999;
	width: 100%;
	display: none;
	div.li{
		float: left;
		width: ~"calc(25% - 100px)";
		padding-left: 100px;
		*{
			color: #c5c5c5
		}
		div.title{
			font-size: 14px;
			width: 100px;
			border-bottom: 1px dashed #adadad;
			padding-bottom: 20px;
			color: #f5f5f5;
			margin-top: 50px;
			text-align: left
		}
		a{
			height: 30px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			display: block;
			width: 100%;
		}
		div.dt{
			font-size: 12px;
			line-height: 30px;
			margin-top: 20px;
			position: relative;
			&:hover{
				background: rgba(225,225,225,.32);
				&:after{
					content: "";
					position: absolute;
					height: 30px;
					width: 15px;
					background: rgba(225,225,225,.32);
					left: -15px;
					top: 0
				}
				a{
					color: #ffdf43
				}
			}
		}
	}
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
		bottom: 50px;
}
div.swiper-container{
	width: 100%;
	height: 600px;
	.swiper-slide{
		img{
			width: 100%;
		}
	}
	.pagination {
		position: absolute;
		z-index: 20;
		bottom: 6%;
		width: 100%;
		text-align: center;
	}
	.swiper-pagination-switch {
		display: inline-block;
		width: 8px;
		border-radius: 8px;
		background: #555;
		margin: 0 5px;
		cursor: pointer;
	}
	.swiper-active-switch {
		background: #fff;
	}
	div.box{
		position: absolute;
		width: 1200px;
		height: 50px;
		top: 40%;
		left: 50%;
		margin-left: -600px;
		.swiper-button-next, .swiper-button-prev{
			background: none;
			display: none;
			cursor: pointer
		}
		.swiper-button-prev{
			float: left
		}
		.swiper-button-next{
			float: right
		}
	}
	.swiper-pagination-switch{
		width: 42px;
		height: 2px;
		border-radius: 0;
		background: #fff;
		opacity: 1;
		&.swiper-active-switch{
			background: #ffdf43
		}
	}
}
iframe{
	border: 0;
	width: 100%;
	height: 100%
}
img,iframe{
	vertical-align: bottom
}
div.h1{
	text-align: center;
	padding: 50px 0 30px;
	div.english{
		text-transform: Uppercase;
		font-size: 20px;
		letter-spacing: 4px;
		font-weight: 100;
		line-height: 2;
		color: #afafaf;
	}
	div.chinese{
		font-size: 16px;
		span{
			color: #66d1d2;
			margin: 0 10px;
		}
	}
}
a.more{
	display: block;
	width: 90px;
	line-height: 25px;
	color: @color;
	border: 1px solid @color;
	border-radius: 15px;
	text-align: center;
	margin-top: 70px;
	&:hover{
		color: #fff;
		background: @color
	}
}
body.index{
	height: 100%;
	width: 100%;
	overflow: auto;
}
div.footerBox{
	height: 413px;
	overflow: hidden;
	background: url(/images/footer-bg.jpg) center no-repeat;
	background-size: 100% 100%;
	clear: both
}
.footer{
	  background: url(/images/footer-bg.jpg) center no-repeat;
	  background-size: 100% 100%;
	  padding-top: 65px;
	  padding-bottom: 35px;
	  color: #f1f3f8;
		&:after{
			display: block;
			clear: both;
			content: ""
		}
		div.box{
			div.left{
				float: left;
				ul{
					float: left;
					margin-right: 45px;
					li{
						margin-bottom: 15px;
						a{
							color: #8d8d8d
						}
						&:first-child{
							margin-bottom: 30px;
							a{
								color: #fff
							}
						}
					}
				}
			}
			div.right{
				float: right;
				padding-top: 20px;
				ul{
					li{
						margin-bottom: 35px;
						padding-left: 30px;
						position: relative;
						width: 450px;
						&:before{
							content: url(/images/footer-icon-1.png);
							position: absolute;
							top: 2px;
							left: 0
						}
						&:nth-child(2){
							&:before{
								content: url(/images/footer-icon-2.png);
							}
							&:after{
								position: absolute;
								content: url(/images/code.png);
								right: 0;
								top: 20px;
							}
						}
						&:nth-child(3){
							&:before{
								content: url(/images/footer-icon-3.png);
							}
						}
						&:nth-child(4){
							&:before{
								content: url(/images/footer-icon-4.png);
							}
						}
					}
				}
			}
			div.copy{
				clear: both;
				text-align: center;
				color: #8d8d8d;
				padding-top: 38px
			}
		}
	}
div.banner > img{
	width: 100%
}
div.hoverShow{
	display: none;
	&.index{
		display: block
	}
}
div.title{
	font-size: 16px
}
.left{
	float: left
}
.right{
	float: right
}
.after:after,div.section:after{
	content: "";
	display: block;
	clear: both
}
div.section:nth-child(2n){
	background: #F5F5F5;
}
.hide{
	opacity: 0;
	position: relative;
	top: 40px;
	transition: opacity 1s, top 1s;
	-ms-transition: opacity 1s, top 1s;
	-moz-transition: opacity 1s, top 1s;
	-webkit-transition: opacity 1s, top 1s;
	-o-transition: opacity 1s, top 1s;
}
body.index{
	div.manufacturing{
		ul.hoverTabBox{
			li{
				width: 20%;
				float: left;
				text-align: center;
				cursor: pointer;
				:nth-child(2),:nth-child(4){
					display: none
				}
				div{
					margin-bottom: 35px;
				}
				&.index,&:hover{
					:nth-child(1){
						display: none
					}
					:nth-child(2),:nth-child(4){
						display: inline-block
					}
				}
				:nth-child(1),:nth-child(2){
					margin-bottom: 20px;
					width: 40px;
				}
				:nth-child(4){
					background: #FFF;
					z-index: 999
				}
			}
		}
		div.hoverShow{
			border: 1px solid @color;
			height: 120px;
			padding: 35px 30px 30px;
			display: none;
			&.index{
				display: block
			}
			ul{
				&.li-3{
					li{
						width: 325px;
						margin-right: 50px;
					}
				}
				&.li-4{
					li{
						width: 248px;
						margin-right: 20px;
					}
				}
				li{
					padding-left: 20px;
					float: left;
					div.title{
						font-size: 16px;
						position: relative;
						margin-bottom: 20px;
						&:after{
							content: "";
							position: absolute;
							width: 6px;
							height: 6px;
							border-radius: 50%;
							background: @color;
							left: -14px;
							top: 8px;
						}
					}
					&:last-child{
						margin: 0;
					}
				}
			}
		}
		div.imgBox{
			text-align: center;
			margin: 40px auto;
			width: 80%
		}
	}
	div.internet{
		background: #F5F5F5;
		ul{
			padding-bottom: 50px;
			li{
				float: left;
				padding: 5px;
				margin: 0 50px 0px 60px;
				width: 480px;
				background: url(/images/index-net-1.jpg) no-repeat;
				background-size: 100% 324px; 
				&:last-child{
					margin: 0 60px 0px 50px;
					background-image: url(/images/index-net-2.jpg)
				}
				div{
					padding: 340px 23px 30px;
					border: 1px solid transparent;
					a{
						display: block;
						width: 120px;
						line-height: 25px;
						color: @color;
						margin: 30px auto 0px;
						border: 1px solid @color;
						text-align: center;
						border-radius: 15px;
					}
				}
				&:hover{
					div{
						border-color: #5188BD;
						a{
							color: #fff;
							background: @color
						}
					}
				}
			}
		}
	}
	div.iot{
		div.divBox{
			div.left{
				float: left;
				width: 665px;
				padding: 10px 0 0 10px;
				position: relative;
				&:after{
					background: @color;
					position: absolute;
					width: 435px;
					height: 300px;
					top: 0;
					left: 0;
					content: ""
				}
				img.divImg{
					width: 665px;
					height: 500px;
					z-index: 999;
					position: relative
				}
				div.title{
					float: left;
					color: @color;
					position: relative;
					padding-left: 15px;
					margin-top: 10px;
					font-size: 14px;
					&:before{
						content: "";
						background: @color;
						position: absolute;
						width: 5px;
						height: 5px;
						border-radius: 50%;
						top: 8px;
						left: 0;
					}
				}
				div.btnBox{
					float: right;
					margin-top: 10px;
					span{
						display: inline-block;
						width: 20px;
						height: 20px;
						text-align: center;
						background: #EFEFEF;
						img{
							height: 12px;
							position: relative;
							top: -3px;
						}
					}
				}
			}
			div.right{
				float: right;
				width: 380px;
				padding-top: 85px;
				margin-right: 60px;
				span{
					&.title{
						font-size: 16px;
					}
					&.line{
						display: inline-block;
						height: 16px;
						width: 1px;
						background: #68B4BC;
						vertical-align: middle;
						margin: 0 15px;
					}
				}
				p{
					margin-top: 35px;
				}
			}
		}
		ul{
			clear: both;
			padding: 80px 15px;
			li{
				float: left;
				margin: 0 20px;
				img{
					width: 240px;
					height: 140px;
					padding: 5px;
					border: 1px solid transparent
				}
				div{
					text-align: center;
					padding: 25px 0;
					color: #2b2b2b
				}
				&.index{
					img{
						border-color: @color
					}
					div{
						color: @color
					}
				}
			}
		}
	}
	div.bim{
		background: #F5F5F5;
		padding-bottom: 60px;
		&:after{
			content: "";
			display: block;
			clear: both
		}
		div.left{
			float: left;
			width: 325px;
			div.title{
				font-size: 16px;
				margin-bottom: 40px;
				margin-top: 100px
			}
		}
		ul.right{
			float: right;
			width: 770px;
			li.idBox{
				float: left;
				position: relative;
				img,div{
					width: 100%;
					height: 100%;
				}
				div{
					position: absolute;
					top: 0;
					left: 0;
					color: #fff;
					text-align: center;
					background: rgba(24, 100, 170, .9);
					display: none;
				}
				&:hover{
					div{
						display: block
					}
				}
				&.index-bim-1{
					width: 275px;
					height: 310px;
					line-height: 310px;
					margin-left: 30px;
					margin-right: 45px;
				}
				&.index-bim-2{
					margin-bottom: 60px;
				}
				&.index-bim-3{
					margin-top: 25px;
				}
				&.index-bim-2,&.index-bim-3{
					width: 420px;
					height: 250px;
					line-height: 250px;
				}
				&.index-bim-4{
					width: 275px;
					height: 360px;
					line-height: 360px;
					float: right;
					margin-top: -40px;
					margin-right: 45px;
				}
				&.index-bim-5{
					width: 430px;
					height: 230px;
					line-height: 230px;
					margin-left: -175px;
					margin-top: 30px
				}
				&.index-bim-6{
					width: 370px;
					height: 200px;
					line-height: 200px;
					margin-left: 45px;
					margin-top: 30px
				}
			}
		}
	}
}
body.manufacturing{
	div.manufactur{
		ul{
			padding-bottom: 35px; 
			li{
				float: left;
				width: 390px;
				height: 300px;
				position: relative;
				margin-bottom: 15px;
				&:nth-child(2),&:nth-child(5){
					margin: 0 15px 0
				}
				img{
					width: 100%;
					height: 100%;
				}
				div.tbBox{
					background: @color;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					text-align: center;
					color: #fff;
					display: none;
					div.chinese{
						font-size: 20px;
						line-height: 2;
						margin-top: 100px;
					}
					div.english{
						font-size: 16px;
						margin-bottom: 50px
					}
					a{
						color: #fff;
						border: 1px solid #fff;
						padding: 2px 15px;
						border-radius: 15px;
					}
				}
				&:hover .tbBox{
					display: block
				}
			}
		}
	}
	div.solution{
		p.gary{
			width: 650px;
			margin: 0 auto 40px;
			text-align: center
		}
		ul{
			padding: 50px 0;
			li{
				float: left;
				height: 176px;
				width: 176px;
				color: #fff;
				div.textBox{
					text-align: center
				}
				div.english{
					font-size: 12px;
					margin: 6px 0 0
				}
				div.chinese{
					font-size: 16px;
				}
				&.manu-solution-3,&.manu-solution-5{
					width: 352px;
				}
				&.manu-solution-2,&.manu-solution-4,&.manu-solution-6{
					background: @color
				}
				&.manu-solution-1{
					transform: rotate(45deg);
					-ms-transform: rotate(45deg); 	/* IE 9 */
					-moz-transform: rotate(45deg); 	/* Firefox */
					-webkit-transform: rotate(45deg); /* Safari 和 Chrome */
					-o-transform: rotate(45deg); 	/* Opera */
				}
				&.manu-solution-2{
					transform: rotate(45deg) translate(60px,125px);
					-ms-transform: rotate(45deg) translate(60px,125px); 	/* IE 9 */
					-moz-transform: rotate(45deg) translate(60px,125px); 	/* Firefox */
					-webkit-transform: rotate(45deg) translate(60px,125px); /* Safari 和 Chrome */
					-o-transform: rotate(45deg) translate(60px,125px); 	/* Opera */
					div.textBox{
						transform: rotate(-45deg) translate(-47px,47px);
						-ms-transform: rotate(-45deg) translate(-47px,47px); 	/* IE 9 */
						-moz-transform: rotate(-45deg) translate(-47px,47px); 	/* Firefox */
						-webkit-transform: rotate(-45deg) translate(-47px,47px); /* Safari 和 Chrome */
						-o-transform: rotate(-45deg) translate(-47px,47px); 	/* Opera */
					}
				}
				&.manu-solution-3{
					transform: rotate(45deg) translate(-38px,128px);
					-ms-transform: rotate(45deg) translate(-38px,128px); 	/* IE 9 */
					-moz-transform: rotate(45deg) translate(-38px,128px); 	/* Firefox */
					-webkit-transform: rotate(45deg) translate(-38px,128px); /* Safari 和 Chrome */
					-o-transform: rotate(45deg) translate(-38px,128px); 	/* Opera */
				}
				&.manu-solution-4{
					transform: rotate(-45deg) translate(-132px,-137px);
					-ms-transform: rotate(-45deg) translate(-132px,-137px); 	/* IE 9 */
					-moz-transform: rotate(-45deg) translate(-132px,-137px); 	/* Firefox */
					-webkit-transform: rotate(-45deg) translate(-132px,-137px); /* Safari 和 Chrome */
					-o-transform: rotate(-45deg) translate(-132px,-137px); 	/* Opera */
					div.textBox{
						transform: rotate(45deg) translate(45px,47px);
						-ms-transform: rotate(45deg) translate(45px,47px); 	/* IE 9 */
						-moz-transform: rotate(45deg) translate(45px,47px); 	/* Firefox */
						-webkit-transform: rotate(45deg) translate(45px,47px); /* Safari 和 Chrome */
						-o-transform: rotate(45deg) translate(45px,47px); 	/* Opera */
					}
				}
				&.manu-solution-5{
					transform: rotate(-45deg) translate(515px,358px);
					-ms-transform: rotate(-45deg) translate(515px,358px); 	/* IE 9 */
					-moz-transform: rotate(-45deg) translate(515px,358px); 	/* Firefox */
					-webkit-transform: rotate(-45deg) translate(515px,358px); /* Safari 和 Chrome */
					-o-transform: rotate(-45deg) translate(515px,358px); 	/* Opera */
				}
				&.manu-solution-6{
					transform: rotate(-45deg) translate(416px,355px);
					-ms-transform: rotate(-45deg) translate(416px,355px); 	/* IE 9 */
					-moz-transform: rotate(-45deg) translate(416px,355px); 	/* Firefox */
					-webkit-transform: rotate(-45deg) translate(416px,355px); /* Safari 和 Chrome */
					-o-transform: rotate(-45deg) translate(416px,355px); 	/* Opera */
					div.textBox{
						transform: rotate(45deg) translate(45px,47px);
						-ms-transform: rotate(45deg) translate(45px,47px); 	/* IE 9 */
						-moz-transform: rotate(45deg) translate(45px,47px); 	/* Firefox */
						-webkit-transform: rotate(45deg) translate(45px,47px); /* Safari 和 Chrome */
						-o-transform: rotate(45deg) translate(45px,47px); 	/* Opera */
					}
				}
				&.manu-solution-7{
					transform: rotate(-45deg) translate(474px,231px);
					-ms-transform: rotate(-45deg) translate(474px,231px); 	/* IE 9 */
					-moz-transform: rotate(-45deg) translate(474px,231px); 	/* Firefox */
					-webkit-transform: rotate(-45deg) translate(474px,231px); /* Safari 和 Chrome */
					-o-transform: rotate(-45deg) translate(474px,231px); 	/* Opera */
				}
			}
			div.manu-solution-box-1:hover li.manu-solution-2,div.manu-solution-box-2:hover li.manu-solution-4,div.manu-solution-box-3:hover li.manu-solution-6{
				background: #fff;
				color: #2b2b2b
			}
		}
	}
	div.case{
		margin-bottom: 40px;
		&:after{
			content: "";
			display: block;
			clear: both
		}
		div.hoverShow{
			float: left;
			width: 730px;
			img{
				width: 730px;
				height: 500px;
			}
			a{
				color: #fff;
				font-size: 16px;
				background: @color;
				padding: 20px 40px;
				display: inline-block;
				span{
					margin-left: 30px
				}
			}
		}
		ul.hoverTabBox{
			float: right;
			width: 425px;
			li{
				border: 1px solid transparent;
				border-bottom-color: #ececec;
				padding: 20px 30px;
				div.title{
					font-size: 16px;
					margin-bottom: 20px;
				}
				&:hover,&.index{
					border: 1px solid @color
				}
			}
		}
	}
}
body.internet{
	div.section{
		padding-bottom: 60px
	}
	div.service{
		ul{
			li{
				float: left;
				width: 590px;
				border: 1px solid transparent;
				background: #fff;
				text-align: center;
				img{
					width: 590px;
					height: 350px;
				}
				div.tbox{
					padding: 15px;
				}
				div.title{
					font-size: 16px;
					margin: 35px 0 20px;
				}
				a{
					margin: 30px auto 40px
				}
				&:first-child{
					margin-right: 15px;
				}
				&:hover{
					border-color: @color
				}
			}
		}
	}
	div.case{
		div.caseBox{
			height: 430px;
			background: url(/images/internet-case.jpg) no-repeat;
			div.tBox{
				width: 474px;
				height: 160px;
				color: #fff;
				background: rgba(22,119,179,.7);
				padding: 135px 60px 135px 66px;
			}
			div.title{
				font-size: 16px;
				margin-bottom: 40px;
				position: relative;
				&:after{
					position: absolute;
					content: "";
					width: 45px;
					height: 2px;
					background: #fff;
					bottom: -15px;
					left: 0;
				}
			}
			.gary{
				color: #fff
			}
		}
	}
}
body.iot{
	div.hardware{
		p.gary{
			width: 735px;
			margin: 0 auto 40px;
			text-align: center;
		}
		ul{
			padding-bottom: 50px;
			li{
				float: left;
				height: 235px;
				text-align: center;
				color: @color;
				position: relative;
				div.title{
					margin-top: 80px
				}
				a.more{
					margin: 30px auto
				}
				img{
					width: 100%;
					height: ~"calc(100% + 2px)";
				}
				div.tbBox{
					width: 235px;
					height: 235px;
					position: absolute;
					bottom: -3px;
					right: 0;
					background: #fff;
					border: 1px solid @color
				}
				&:nth-child(1),&:nth-child(3),&:nth-child(6),&:nth-child(7){
					width: 235px;
				}
				&:nth-child(1),&:nth-child(3),&:nth-child(6){
					border: 1px solid @color;
					div.arrow{
						position: absolute;
						width: 40px;
						height: 40px;
						line-height: 40px;
						background: #fff;
						z-index: 9999;
					}
					&:hover, &:hover div.arrow{
						background: @color;
						color: #fff
					}
					&:hover a{
						color: #fff;
						border-color: #fff
					}
				}
				&:nth-child(1) div.arrow{
					top: 95px;
					right: -41px;
				}
				&:nth-child(3) div.arrow{
					left: 95px;
					bottom: -41px;
					transform: rotate(90deg);
					-ms-transform: rotate(90deg); 	/* IE 9 */
					-moz-transform: rotate(90deg); 	/* Firefox */
					-webkit-transform: rotate(90deg); /* Safari 和 Chrome */
					-o-transform: rotate(90deg); 	/* Opera */
				}
				&:nth-child(6) div.arrow{
					top: 95px;
					left: -41px;
				}
				&:nth-child(2),&:nth-child(5){
					width: 360px
				}
				&:nth-child(4){
					height: 472px;
					width: 366px;
					float: right;
					&:hover{
						.tbBox{
							background: @color;
							color: #fff;
						}
						a{
							color: #fff;
							border-color: #fff
						}
					}
				}
				&:nth-child(7){
					width: 237px;
				}
			}
		}
	}
	div.experience{
		ul{
			li{
				text-align: center;
				border: 1px solid @color;
				width: 480px;
				position: relative;
				float: left;
				margin: 10px 70px 60px;
				&:nth-child(2){
					img{
						vertical-align: middle
					}
				}
				img{
					width: 100%;
					height: 324px;
				}
				.tBox{
					padding: 0 35px 20px;
					border-top: 1px solid @color;
					div.title{
						margin: 30px 0;
						font-size: 16px;
					}
				}
				div.btn{
					position: absolute;
					top: 0;
					left: 0;
					width: 481px;
					height: 325px;
					background: rgba(24, 100, 170, .9);
					display: none;
					a{
						color: #fff;
						border-color: #fff;
						margin: 150px auto;
					}
				}
				&:hover{
					div.btn{
						display: block
					}
				}
				&:nth-child(2){
					margin-left: 26px;
				}
			}
		}
	}
	div.case{
		ul{
			li{
				float: left;
				width: 360px;
				height: 195px;
				background: @color;
				&:nth-child(2){
					margin: 0 60px;
				}
				img{
					width: 100%;
					height: 100%;
					-webkit-transition: all 0.5s;
					-moz-transition: all 0.5s;
					-ms-transition: all 0.5s;
					-o-transition: all 0.5s;
					transition: all 0.5s;
				}
				&.index{
					img{
						-webkit-transform: scale(1.1, 1.1);
						-moz-transform: scale(1.1, 1.1);
						-ms-transform: scale(1.1, 1.1);
						-o-transform: scale(1.1, 1.1);
						transform: scale(1.1, 1.1);
					}
				}
			}
		}
		div.pre,div.next{
			width: 20px;
			height: 35px;
			margin-top: 80px
		}
		div.pre{
			float: left;
		}
		div.next{
			float: right;
		}
		div.text{
			width: 730px;
			margin: 40px auto 80px;
			text-align: center;
			div.title{
				font-size: 16px;
				margin-bottom: 40px
			}
		}
	}
}
body.bim{
	div.bim{
		p.gary{
			width: 730px;
			margin: 0 auto 60px;
			text-align: center
		}
		div.left{
			img{
				width: 590px;
				height: 420px
			}
		}
		div.right{
			width: 520px;
			margin-right: 40px;
			div.title{
				margin: 40px 0
			}
		}
	}
	div.app{
		clear: both;
		p.gary{
			width: 730px;
			margin: 0 auto 40px;
			text-align: center
		}
		ul{
			padding-bottom: 80px;
			li{
				width: 200px;
				height: 200px;
				float: left;
				img{
					width: 100%;
					height: 100%;
				}
				&:first-child,&:nth-child(3),&:nth-child(7),&:nth-child(9),&:nth-child(5) div.tBox{
					background: #fff;
					text-align: center;
					div.title{
						margin: 70px 0 10px;
					}
					div.english{
						font-size: 12px;
						line-height: 20px
					}
				}
				&:nth-child(5){
					width: 400px;
					height: 400px;
					float: right;
					position: relative;
					div.tBox{
						position: absolute;
						width: 200px;
						height: 200px;
						bottom: 0;
						right: 0
					}
				}
			}
		}
	}
	div.case{
		div.left{
			width: 635px;
			height: 315px;
			margin-bottom: 50px
		}
		div.right{
			width: 440px;
			margin-right: 70px;
			div.title{
				margin: 90px 0 40px
			}
		}
	}
}
body.teach{
	div.campus{
		margin-bottom: 60px;
		div.hoverShow{
			position: relative;
			img{
				width: 685px;
				height: 320px;
			}
			div{
				position: absolute;
				bottom: 0;
				left: 0;
				width: ~"calc(100% - 60px)";
				color: #fff;
				background: rgba(0,0,0,.7);
				padding: 25px 30px 20px;
				line-height: 27px
			}
		}
		ul.hoverTabBox{
			width: 500px;
			li{
				border: 1px solid transparent;
				img{
					width: 165px;
					height: 95px;
				}
				div.right{
					width: 290px;
					padding: 0 20px 10px;
					div.title{
						font-size: 14px;
						margin: 15px 0 9px;
					}
					p.gary{
						font-size: 12px;
						line-height: 1.5;
						margin-top: 10px
					}
				}
				&.index{
					border-color: @color
				}
				&:nth-child(2){
					margin: 15px 0
				}
			}
		}
	}
	div.solution{
		div.english{
			letter-spacing: 10px;
		}
		div.left{
			img{
				width: 455px;
				height: 325px
			}
			margin-bottom: 60px;
		}
		div.right{
			width: 621px;
			margin-right: 65px;
			div.title{
				margin: 40px 0;
				position: relative;
				&:after{
					content: "";
					position: absolute;
					width: 40px;
					height: 2px;
					background: @color;
					bottom: -15px;
					left: 0
				}
			}
			a.more{
				margin-top: 40px;
			}
		}
	}
	div.case{
		div.left{
			float: right;
			margin-bottom: 80px;
			position: relative;
			&:after{
				content: "";
				position: absolute;
				width: 485px;
				height: 375px;
				border: 1px solid @color;
				top: 20px;
				left: 15px;
			}
			img{
				width: 485px;
				height: 375px;
				position: relative;
				z-index: 999
			}
		}
		div.right{
			float: left;
			width: 570px;
			margin-right: 60px;
			div.title{
				margin: 66px 0 40px;
				position: relative;
				&:after{
					content: "";
					position: absolute;
					width: 40px;
					height: 2px;
					background: @color;
					bottom: -15px;
					left: 0
				}
			}
		}
	}
}
body.about{
	div.about{
		ul{
			width: 550px;
			margin-bottom: 60px;
			li{
				float: left;
				width: 190px;
				height: 150px;
				img{
					width: 100%;
					height: 100%;
				}
				&:first-child{
					width: 340px;
					height: 320px;
					margin-right: 20px
				}
				&:nth-child(2){
					margin-bottom: 20px
				}
			}
		}
		div.right{
			width: 550px;
			margin-right: 50px;
			div.title{
				margin: 40px 0;
				position: relative;
				&:after{
					content: "";
					position: absolute;
					width: 40px;
					height: 2px;
					background: @color;
					bottom: -15px;
					left: 0
				}
			}
		}
	}
	div.new{
		clear: both;
		div.h1{
			padding-top: 30px
		}
		div.hoverShow{
			float: right;
			margin-bottom: 60px;
			position: relative;
			img{
				width: 450px;
				height: 470px;
			}
			div.tBox{
				position: absolute;
				bottom: 0;
				left: 0;
				width: ~"calc(100% - 40px)";
				color: #fff;
				background: rgba(0,0,0,.7);
				padding: 25px 20px 20px;
				line-height: 27px;
				div.left{
					font-size: 16px;
				}
				div.right{
					color: #dadada
				}
			}
		}
		ul.hoverTabBox{
			width: 660px;
			margin-right: 36px;
			float: left;
			li{
				padding: 25px 0;
				border-bottom: 1px solid #DCDCDC;
				div.title{
					margin-bottom: 20px;
					padding-left: 20px;
					padding-right: 10px;
					background: url(/images/about-new-title.png) 0 center no-repeat;
					div.right{
						color: #999;
						font-size: 14px
					}
				}
				a{
					color: #2b2b2b
				}
				&.index{
					div.title{
						background-image: url(/images/about-new-title-1.png);
						color: @color
					}
				}
			}
		}
	}
	div.partner{
		ul{
		  margin-bottom: 40px;
			margin-top: -20px;
		  li{
				float: left;
				width: 25%;
				height: 110px;
				text-align: center;
				overflow: hidden;
				img.actived{
					display: none
				}
				&:hover{
					img.active{
						display: none;
					}
					img.actived{
						display: inline-block;
					}
				}
				&:first-child img{
					margin-top: 25px
				}
				&:nth-child(3) img{
					margin-top: 13px;
					margin-left: 28px
				}
				&:nth-child(4) img{
					margin-top: 34px;
					margin-left: 77px; 
				}
				&:nth-child(7) img{
					margin-top: 14px;
					margin-left: 28px
				}
				&:nth-child(9) img{
					margin-top: 5px;
				}
				&:nth-child(10) img{
					margin-top: -15px;
					margin-right: 5px
				}
				&:nth-child(11) img{
					margin-top: 17px;
					margin-left: 28px
				}
				&:nth-child(12) img{
					margin-top: 17px;
				}
				&:nth-child(5),&:nth-child(6),&:nth-child(8){
					img{
						margin-top: 8px;
					}
				}
		  }
		}
	}
}
body.index-bim-detail{
	div.title{
		font-size: 20px;
		text-align: center;
		padding: 50px 0 15px
	}
	p.gary{
		font-size: 16px;
		text-align: center;
		padding: 0 0 30px;
	}
	ul.nav{
		li{
			width: 16.666%;
			float: left;
			text-align: center;
			padding: 80px 0 0;
			a{
				display: block;
				color: #2b2b2b
			}
			div{
				margin-top: 20px
			}
			.st0 {
				fill: #292929;
			}
			&:hover,&.index{
				.st0{
					fill: @color
				}
				a{
					color: @color
				}
			}
		}
	}
	div.section{
		padding: 0 0 60px;
	}
	div.build{
		div.left{
			padding: 10px 0 0 10px;
			position: relative;
			div{
				position: absolute;
				width: 230px;
				height: 180px;
				background: @color;
				top: 0;
				left: 0
			}
			img{
				width: 580px;
				height: 320px;
				position: relative;
				z-index: 999
			}
		}
		div.right{
			width: 540px;
			margin-top: 60px
		}
	}
	div.highway{
		div.left{
			width: 660px;
			padding: 75px 50px;
			background: #fff;
		}
		img{
			width: 440px;
			height: 366px
		}
	}
	div.factory{
		div.left{
			position: relative;
			padding: 0 10px 10px 0;
			div{
				width: 575px;
				height: 360px;
				position: absolute;
				right: 0;
				bottom: 0;
				border: 1px solid @color
			}
			img{
				width: 575px;
				height: 365px;
				position: relative;
				z-index: 999
			}
		}
		div.right{
			width: 530px;
			padding: 60px 35px 15px
		}
	}
	div.education{
		div.left{
			width: 725px;
			padding: 40px 0 60px 45px
		}
		img{
			width: 385px;
			height: 365px;
		}
	}
	div.scenicArea{
		img{
			width: 480px;
			height: 345px;
		}
		div.right{
			width: 595px;
			margin-right: 66px;
			margin-top: 50px
		}
	}
	div.fireControl{
		div.left{
			width: 715px;
			margin: 37px 0 0 55px
		}
		img{
			width: 370px;
			height: 265px
		}
	}
}
body.index-iot-detail{
	.mycontent{
		div.title{
			font-size: 20px;
			text-align: center;
			padding: 50px 0 15px
		}
		p.gary{
			font-size: 16px;
			text-align: center;
			padding: 0 0 30px;
		}
		div.section1{
			padding-left: 15px;
			span.title{
				margin-right: 15px;
				position: relative;
				&:before{
					content: "";
					width: 6px;
					height: 6px;
					background: #2b2b2b;
					left: -15px;
					top: 7px;
					position: absolute
				}
			}
			span.line,span.english{
				color: #BFBFBF
			}
			span.english{
				margin-left: 15px;
				text-transform: Uppercase;
			}
			div.gary{
				margin: 35px 0;
				div.br{
					margin-bottom: 5px;
				}
			}
			img{
				width: 100%;
				margin-bottom: 50px
			}
		}
		div.newContent{
			margin-bottom: 60px
		}
	}
}
body.iot-detail{
	div.title{
		font-size: 20px;
		text-align: center;
		padding: 50px 0 15px
	}
	p.gary{
		font-size: 16px;
		text-align: center;
		padding: 0 0 30px;
	}
	div.content{
		img{
			width: 100%
		}
	}
}
body.login{
	height: 100%;
	overflow: hidden;
	background: url(/images/login-bg.jpg) @color no-repeat;
	background-size: 100% 100%;
	*{
		color: #fff;
	}
	img.left{
		width: 65%;
		height: 100%;
	}
	div.login-div{
		width: ~"calc(35% - 100px)";
		height: ~"calc(100% - 100px)";
		padding: 30px 100px 50px 0;
		position: relative;
		a.left{
			float: right;
			font-size: 12px;
			img{
				margin-left: 5px;
				height: 14px;
			}
		}
		ul.right{
			float: left;
			font-size: 12px;
			li{
				float: left;
				padding: 0 6px 8px;
				margin-left: 30px;
				border-bottom: 1px solid transparent;
				&.index,&:hover{
					border-color: #fff
				}
			}
		}
		img.login-logo{
			display: block;
			width: 170px;
			height: 50px;
			margin: 100px auto 30px;
			clear: both
		}
		div.login-section{
			width: 345px;
			margin: 0 auto;
			input.block,button{
				display: block;
				outline: 0;
			}
			
			input::input-placeholder{color:  #67b9e8 ;} /* 有些资料显示需要写，有些显示不需要，但是在编辑器webstorm中该属性不被识别 */
			::-webkit-input-placeholder { /* WebKit browsers */ 
				color: #67b9e8; 
			} 
			:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
				color: #67b9e8; 
			} 
			::-moz-placeholder { /* Mozilla Firefox 19+ */ 
				color: #67b9e8; 
			} 
			:-ms-input-placeholder { /* Internet Explorer 10+ */ 
				color: #67b9e8; 
			} 
			input.block{
				border: 0;
				border-bottom: 1px solid #67b9e8;
				padding: 15px 0 5px;
				padding-left: 60px;
				line-height: 30px;
				width: ~"calc(100% - 60px)";
				background: url(/images/user.png) 10px 20px no-repeat;
				&.psd{
					background-image: url(/images/psd.png)
				}
				&.message{
					background-image: url(/images/message.png);
					background-position-y: 22px;
				}
				&:focus{
					border-color: #fff;
					color: #fff
				}
			}
			button{
				width: 100%;
				text-align: center;
				background: none;
				border: 1px solid #fff;
				padding: 10px 0
			}
			div.remember{
				padding: 20px 15px 80px;
				font-size: 12px;
				input{
					position: relative;
					top: 3px;
					outline: 0;
					border: 1px solid #fff;
					appearance: normal!important;	
					-ms-appearance: normal!important;
					-moz-appearance: normal!important;
					-webkit-appearance: normal!important;
					-o-appearance: normal!important;
				}
			}
			a.register{
				display: block;
				text-align: center;
				padding: 15px 0;
				color: rgba(255,255,255,.7);
				font-size: 12px
			}
		}
		div.copy{
			position: absolute;
			bottom: 0px;
			width: ~"calc(100% - 100px)";
			left: 0;
			text-align: center;
			font-size: 12px;
		}
	}
}
body.meter{
	div.mine{
		div.left{
			width: 580px;
			img{
				width: 100%;
			}
		}
		div.right{
			width: 620px;
			position: relative;
			left: -50px;
			embed{
				width: 690px;
			}
		}
		p.gary{
			clear: both;
			width: 80%;
			margin: 50px auto;
			text-align: center;
		}
	}
	div.metering{
		div.english{
			color: @color;
			font-size: 20px;
		}
		div.left{
			width: 545px;
			div.sub{
				font-weight: bold;
				padding-bottom: 35px;
				position: relative;
				margin-bottom: 60px;
				margin-top: 15px;
				&:after{
					position: absolute;
					content: "";
					width: 50px;
					height: 2px;
					background: @color;
					bottom: 0;
					left: 0
				}
			}
		}
		div.right{
			width: 565px;
			font-size: 0;
			img{
				float: left;
				&:nth-child(2) {
					margin-left: 30px;
					margin-top: 90px;
				}
				&:nth-child(3) {
					margin-left: 90px;
					margin-top: -35px;
				}
			}
		}
		embed{
			margin: 60px 0 80px;
		}
	}
	div.system{
		overflow: hidden;
		ul{
			// width: 900px;
			// margin: 30px auto 80px;
			margin-bottom: 30px;
			li{
				float: left;
				// width: 370px;
				width: 355px;
				margin-bottom: 15px;
				background: #fff;
				// text-align: center;
				position: relative;
				img{
					width: 100%;
					// height: 275px;
					height: 165px;
				}
				div.title{
					// color: @color;
					padding: 0 20px;
					// margin: 35px 0;
					margin: 30px 0 0;
				}
				p{
					padding: 20px;
					line-height: 2;
					color: #afafaf
				}
				a.more{
					margin: 40px auto 20px;
					position: relative;
					z-index: 9999
				}
				&.margin{
					margin: 0 65px 15px
				}
				&:hover{
					box-shadow: 0 0 15px #ddd;
					// &:after{
					// 	content: "";
					// 	position: absolute;
					// 	width: 360px;
					// 	height: 400px;
					// 	border: 1px solid @color;
					// 	left: 4px;
					// 	top: 5px;
					// }
				}
			}
		}
	}
	div.application{
		ul{
			li{
				float: left;
				width: 285px;
				height: 235px;
				margin-left: 15px;
				margin-top: 15px;
				position: relative;
				-webkit-transition: all 0.5s;
				-moz-transition: all 0.5s;
				-ms-transition: all 0.5s;
				-o-transition: all 0.5s;
				transition: all 0.5s;
				&:first-child{
					width: 600px;
					height: 485px;
					margin: 0;
					margin-top: 15px;
				}
				img{
					width: 100%;
					height: 100%;
				}
				div.line{
					border: 1px solid @color;
					width: ~"calc(100% - 10px)";
					height: ~"calc(100% - 10px)";
					position: absolute;
					left: 4px;
					top: 5px;
					display: none;
					div{
						font-size: 16px;
						color: #fff;
						padding-left: 15px;
						padding-top: 15px;
						span{
							display: inline-block;
							background: @color;
							height: 4px;
							width: 4px;
							border-radius: 50%;
							margin-right: 10px;
							position: relative;
							top: -5px;
						}
					}
				}
				&:hover{
					div.line{
						display: block
					}
					-webkit-transform: scale(1.05, 1.05);
					-moz-transform: scale(1.05, 1.05);
					-ms-transform: scale(1.05, 1.05);
					-o-transform: scale(1.05, 1.05);
					transform: scale(1.05, 1.05);
				}
			}
		}
	}
	div.case{
		ul{
			padding: 0 10px;
			li{
				background: #fff;
				width: 245px;
				float: left;
				margin: 0 35px;
				&.first{
					margin-left: 0;
				}
				&.last{
					margin-right: 0;
				}
				div.imgBox{
					overflow: hidden;
					width: 100%;
					height: 180px;
				}
				img{
					width: 100%;
					height: 100%;
					-webkit-transition: all 0.5s;
					-moz-transition: all 0.5s;
					-ms-transition: all 0.5s;
					-o-transition: all 0.5s;
					transition: all 0.5s;
				}
				&.index{
					box-shadow: 0 0 15px #ddd;
					img{
						-webkit-transform: scale(1.1, 1.1);
						-moz-transform: scale(1.1, 1.1);
						-ms-transform: scale(1.1, 1.1);
						-o-transform: scale(1.1, 1.1);
						transform: scale(1.1, 1.1);
					}
				}
				div.title{
					font-weight: bold;
					text-align: center;
					margin: 20px 0;
				}
				div.text{
					text-align: center;
					margin: 20px 20px 30px;
					height: 110px;
				}
			}
		}
	}
	div.bottom{
		height: 60px;
	}
}